{% block sw_cms_element_image_slider_config %}
<div class="sw-cms-el-config-image-slider">
    {% block sw_cms_element_image_slider_config_tabs %}
    <sw-tabs
        position-identifier="sw-cms-element-config-image-slider"
        class="sw-cms-el-config-image-slider__tabs"
        default-item="content"
    >
        <template #default="{ active }">
            {% block sw_cms_element_image_slider_config_tab_content %}
            <sw-tabs-item
                :title="$t('sw-cms.elements.general.config.tab.content')"
                name="content"
                :active-tab="active"
            >
                {{ $t('sw-cms.elements.general.config.tab.content') }}
            </sw-tabs-item>
            {% endblock %}
            {% block sw_cms_element_image_slider_config_tab_options %}
            <sw-tabs-item
                :title="$t('sw-cms.elements.general.config.tab.settings')"
                name="settings"
                :active-tab="active"
            >
                {{ $t('sw-cms.elements.general.config.tab.settings') }}
            </sw-tabs-item>
            {% endblock %}
        </template>

        <template
            #content="{ active }"
        >
            {% block sw_cms_element_image_slider_config_content %}
            <sw-container
                v-if="active === 'content'"
                class="sw-cms-el-config-image-slider__tab-content"
            >
                {% block sw_cms_element_image_slider_config_media_selection %}
                <sw-cms-inherit-wrapper
                    field="sliderItems"
                    :element="element"
                    :label="$t('sw-cms.elements.imageSlider.config.label.sliderItems')"
                    @inheritance:restore="initSliderItems"
                >
                    <template #default="{ isInherited }">
                        <sw-media-list-selection-v2
                            :entity-media-items="mediaItems"
                            :entity="entity"
                            :upload-tag="uploadTag"
                            :default-folder-name="defaultFolderName"
                            :disabled="isInherited"
                            @upload-finish="onImageUpload"
                            @item-remove="onItemRemove"
                            @open-sidebar="onOpenMediaModal"
                            @item-sort="onItemSort"
                        />
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}

                {% block sw_cms_element_image_slider_config_media_modal %}
                <sw-media-modal-v2
                    v-if="mediaModalIsOpen"
                    variant="full"
                    :caption="$t('sw-cms.elements.general.config.caption.mediaUpload')"
                    :entity-context="cmsPageState.entityName"
                    :initial-folder-id="cmsPageState.defaultMediaFolderId"
                    @media-upload-remove-image="onItemRemove"
                    @media-modal-selection-change="onMediaSelectionChange"
                    @modal-close="onCloseMediaModal"
                />
                {% endblock %}
            </sw-container>
            {% endblock %}

            {% block sw_cms_element_image_slider_config_settings %}
            <sw-container
                v-if="active === 'settings'"
                class="sw-cms-el-config-image-slider__tab-settings"
            >
                <div class="sw-cms-el-config-image-slider__settings-options">
                    {% block sw_cms_element_image_slider_config_settings_display_mode %}
                    {# @deprecated tag:v6.8.0 - Block will be removed. Use `sw_cms_element_image_slider_config_settings_display_mode` instead. #}
                    {% block sw_cms_element_image_gallery_config_settings_display_mode %}
                    <div class="sw-cms-el-config-image-slider__setting-option">
                        {% block sw_cms_element_image_slider_config_settings_display_mode_select %}
                        {# @deprecated tag:v6.8.0 - Block will be removed. Use `sw_cms_element_image_slider_config_settings_display_mode_select` instead. #}
                        {% block sw_cms_element_image_gallery_config_settings_display_mode_select %}
                        <sw-cms-inherit-wrapper
                            field="displayMode"
                            :element="element"
                            :label="$t('sw-cms.elements.general.config.label.displayMode')"
                        >
                            <template #default="{ isInherited }">
                                <mt-select
                                    v-model="element.config.displayMode.value"
                                    class="sw-cms-el-config-image-slider__setting-display-mode"
                                    :help-text="$t('sw-cms.elements.imageSlider.config.helpText.displayMode')"
                                    :options="displayModeValueOptions"
                                    :disabled="isInherited"
                                    @update:model-value="onChangeDisplayMode"
                                />
                            </template>
                        </sw-cms-inherit-wrapper>
                        {% endblock %}
                        {% endblock %}

                        {% block sw_cms_element_image_slider_config_settings_min_height %}
                        {# @deprecated tag:v6.8.0 - Block will be removed. Use `sw_cms_element_image_slider_config_settings_min_height` instead. #}
                        {% block sw_cms_element_image_gallery_config_settings_min_height %}
                        <sw-cms-inherit-wrapper
                            field="minHeight"
                            :element="element"
                            :label="$t('sw-cms.elements.image.config.label.minHeight')"
                        >
                            <template #default="{ isInherited }">
                                <mt-text-field
                                    v-model="element.config.minHeight.value"
                                    :placeholder="$t('sw-cms.elements.image.config.label.minHeight')"
                                    :help-text="$t('sw-cms.elements.image.config.label.minHeightHelpText')"
                                    :disabled="isInherited || element.config.displayMode.value !== 'cover'"
                                    @update:model-value="onChangeMinHeight"
                                />
                            </template>
                        </sw-cms-inherit-wrapper>
                        {% endblock %}
                        {% endblock %}

                        {% block sw_cms_element_image_slider_config_settings_vertical_align %}
                        {# @deprecated tag:v6.8.0 - Block will be removed. Use `sw_cms_element_image_slider_config_settings_vertical_align` instead. #}
                        {% block sw_cms_element_image_gallery_config_settings_vertical_align %}
                        <sw-cms-inherit-wrapper
                            field="verticalAlign"
                            :element="element"
                            :label="$t('sw-cms.elements.general.config.label.verticalAlign')"
                        >
                            <template #default="{ isInherited }">
                                <mt-select
                                    v-model="element.config.verticalAlign.value"
                                    :placeholder="$t('sw-cms.elements.general.config.label.verticalAlign')"
                                    :disabled="isInherited || element.config.displayMode.value === 'cover'"
                                    :options="verticalAlignValueOptions"
                                />
                            </template>
                        </sw-cms-inherit-wrapper>
                        {% endblock %}
                        {% endblock %}
                    </div>
                    {% endblock %}
                    {% endblock %}

                    {% block sw_cms_element_image_slider_config_settings_navigation %}
                    <div class="sw-cms-el-config-image-slider__setting-navigations sw-cms-el-config-image-slider__setting-option">
                        <div class="sw-cms-el-config-image-slider__settings-navigation">
                            {% block sw_cms_element_image_slider_config_settings_navigation_arrow_position %}
                            <sw-cms-inherit-wrapper
                                field="navigationArrows"
                                :element="element"
                                :label="$t('sw-cms.elements.imageSlider.config.label.navigationArrows')"
                            >
                                <template #default="{ isInherited }">
                                    <mt-select
                                        v-model="element.config.navigationArrows.value"
                                        :options="navigationArrowsValueOptions"
                                        :disabled="isInherited"
                                        @update:model-value="emitUpdateEl"
                                    />
                                </template>
                            </sw-cms-inherit-wrapper>
                            {% endblock %}
                        </div>

                        <div class="sw-cms-el-config-image-slider__settings-navigation">
                            {% block sw_cms_element_image_slider_config_settings_navigation_dots_position %}
                            <sw-cms-inherit-wrapper
                                field="navigationDots"
                                :element="element"
                                :label="$t('sw-cms.elements.imageSlider.config.label.navigationDots')"
                            >
                                <template #default="{ isInherited }">
                                    <mt-select
                                        v-model="element.config.navigationDots.value"
                                        :options="navigationDotsValueOptions"
                                        :disabled="isInherited"
                                        @update:model-value="emitUpdateEl"
                                    />
                                </template>
                            </sw-cms-inherit-wrapper>
                            {% endblock %}
                        </div>
                    </div>
                    {% endblock %}

                    <div class="sw-cms-el-config-image-slider__setting-speed">
                        {% block sw_cms_element_image_slider_config_settings_speed %}
                        <sw-cms-inherit-wrapper
                            field="speed"
                            :element="element"
                            :label="$t('sw-cms.elements.general.config.label.speed')"
                        >
                            <template #default="{ isInherited }">
                                <mt-number-field
                                    v-model="element.config.speed.value"
                                    class="sw-cms-el-config-image-slider__setting-speed-slide"
                                    number-type="int"
                                    :min="0"
                                    :max="3600000"
                                    :placeholder="$t('sw-cms.elements.general.config.label.speed')"
                                    :help-text="$t('sw-cms.elements.general.config.helpText.speed')"
                                    :disabled="isInherited"
                                />
                            </template>
                        </sw-cms-inherit-wrapper>
                        {% endblock %}
                    </div>

                    <mt-banner
                        class="sw-cms-el-config-image-slider__setting-auto-slide"
                        variant="attention"
                        :title="$t('sw-cms.elements.general.config.infoText.autoSlideTitle')"
                    >
                        <p class="sw-cms-el-config-image-slider__setting-auto-slide-attention">
                            {{ $t('sw-cms.elements.general.config.infoText.autoSlide') }}
                        </p>

                        <div class="sw-cms-el-config-image-slider__setting-auto-slide-container sw-cms-el-config-image-slider__setting-option">
                            <div class="sw-cms-el-config-image-slider__setting-auto-slide-switch">
                                {% block sw_cms_element_image_slider_config_settings_auto_slide %}
                                <sw-cms-inherit-wrapper
                                    field="autoSlide"
                                    :element="element"
                                >
                                    <template #default="{ isInherited }">
                                        <mt-switch
                                            v-model="element.config.autoSlide.value"
                                            class="sw-cms-el-config-image-slider__setting-auto-slide"
                                            :label="$t('sw-cms.elements.general.config.label.autoSlide')"
                                            :disabled="isInherited"
                                            bordered
                                            @update:model-value="onChangeAutoSlide"
                                        />
                                    </template>
                                </sw-cms-inherit-wrapper>
                                {% endblock %}
                            </div>

                            <div class="sw-cms-el-config-image-slider__setting-auto-slide-delay">
                                {% block sw_cms_element_image_slider_config_settings_autoplay_timeout %}
                                <sw-cms-inherit-wrapper
                                    field="autoplayTimeout"
                                    :element="element"
                                    :label="$t('sw-cms.elements.general.config.label.autoplayTimeout')"
                                >
                                    <template #default="{ isInherited }">
                                        <mt-number-field
                                            v-model:model-value="element.config.autoplayTimeout.value"
                                            class="sw-cms-el-config-image-slider__setting-delay-slide"
                                            number-type="int"
                                            :min="0"
                                            :max="3600000"
                                            :placeholder="$t('sw-cms.elements.general.config.label.autoplayTimeout')"
                                            :help-text="$t('sw-cms.elements.general.config.helpText.autoplayTimeout')"
                                            :disabled="isInherited"
                                        />
                                    </template>
                                </sw-cms-inherit-wrapper>
                                {% endblock %}
                            </div>
                        </div>
                    </mt-banner>

                    <sw-cms-inherit-wrapper
                        field="isDecorative"
                        :element="element"
                    >
                        <template #default="{ isInherited }">
                            <mt-switch
                                class="sw-cms-el-config-image-slider__settings-is-decorative"
                                :model-value="element.config.isDecorative.value"
                                :label="$t('sw-cms.elements.image.config.label.isDecorative')"
                                :help-text="$t('sw-cms.elements.image.config.label.isDecorativeHelpText')"
                                :disabled="isInherited"
                                bordered
                                @update:model-value="onChangeIsDecorative"
                            />
                        </template>
                    </sw-cms-inherit-wrapper>

                    {% block sw_cms_element_image_slider_config_settings_use_fetch_priority_on_first_item %}
                    <sw-cms-inherit-wrapper
                        field="useFetchPriorityOnFirstItem"
                        :element="element"
                    >
                        <template #default="{ isInherited }">
                            <mt-switch
                                class="sw-cms-el-config-image-slider__settings-use-fetch-priority-on-first-item"
                                :model-value="element.config.useFetchPriorityOnFirstItem.value"
                                :label="$t('sw-cms.elements.image.config.label.useFetchPriorityOnFirstItem')"
                                :help-text="$t('sw-cms.elements.image.config.label.useFetchPriorityOnFirstItemHelpText')"
                                :disabled="isInherited"
                                bordered
                                @update:model-value="onChangeUseFetchPriorityOnFirstItem"
                            />
                        </template>
                    </sw-cms-inherit-wrapper>
                    {% endblock %}

                    {% block sw_cms_element_image_slider_config_settings_links %}
                    <div class="sw-cms-el-config-image-slider__settings-links sw-cms-el-config-image-slider__setting-option">
                        <div
                            v-for="(sliderItem, index) in items"
                            :key="index"
                            class="sw-cms-el-config-image-slider__settings-link"
                        >
                            {% block sw_cms_element_image_slider_config_settings_link_url %}
                            <sw-container
                                :key="sliderItem.mediaId"
                                class="sw-cms-el-config-image-slider__settings-link-container"
                            >
                                <img
                                    v-if="sliderItem.mediaUrl"
                                    class="sw-cms-el-config-image-slider__settings-link-prefix"
                                    :src="sliderItem.mediaUrl"
                                    alt=""
                                >

                                <mt-url-field
                                    v-model="sliderItem.url"
                                    class="sw-cms-el-config-image-slider__settings-link-input"
                                    :name="sliderItem.mediaUrl"
                                    :placeholder="$t('sw-cms.elements.image.config.placeholder.enterUrl')"
                                    :label="$t('sw-cms.elements.image.config.label.linkTo')"
                                />
                            </sw-container>
                            {% endblock %}

                            {% block sw_cms_element_image_slider_config_settings_link_aria_label %}
                            <mt-text-field
                                v-model="sliderItem.ariaLabel"
                                class="sw-cms-el-config-image-slider__settings-link-aria-label"
                                :name="sliderItem.ariaLabel"
                                :help-text="$t('sw-cms.elements.image.config.label.ariaLabelHelpText')"
                                :label="$t('sw-cms.elements.image.config.label.ariaLabel')"
                            />
                            {% endblock %}

                            {% block sw_cms_element_image_slider_config_settings_link_target %}
                            <mt-switch
                                v-model="sliderItem.newTab"
                                class="sw-cms-el-config-image-slider__settings-link-tab"
                                :name="sliderItem.mediaId"
                                :label="$t('sw-cms.elements.image.config.label.linkNewTab')"
                                bordered
                            />
                            {% endblock %}
                        </div>
                    </div>
                    {% endblock %}
                </div>
            </sw-container>
            {% endblock %}
        </template>
    </sw-tabs>
    {% endblock %}
</div>
{% endblock %}
